import { createMemo } from 'solid-js'
import { usePageContext } from 'vike-solid/usePageContext'

export function Link(props: { href: string; children: string }) {
  const pageContext = usePageContext()
  const isActive = createMemo(() =>
    props.href === '/' ? pageContext.urlPathname === props.href : pageContext.urlPathname.startsWith(props.href),
  )
  return (
    <a href={props.href} class={isActive() ? 'is-active' : undefined}>
      {props.children}
    </a>
  )
}
